<template>
  
  <div style="width: 100%; height: 100%" class="page-layout"> 
    <h1>DvChartMap</h1>
    <p>地图图表</p>

    <h2>dv-chart-map settings 配置</h2>
    <pre> 
      {
        // map scatter effectScatter lines
        type: {
          type: [Object, String],
          default: 'map'
        },
        // 是否开启Geo
        geo: {
          type: Boolean,
          default: true
        },
        // 构造序列数据项辅助函数
        dataHelper: [Object, Function],
        // 序列构造辅助函数
        typeHelper: [Object, Function],
        // 地图拖动
        roam: {
          type: Boolean,
          default: false
        },
      }
    </pre>   
    <h2>基本使用</h2>
    <textarea readonly style="width: 800px; height: 220px">
      <dv-chart-map fit :data="data" :register="register" map="china"></dv-chart-map>

      import china from '@/assets/geo/china.json' // 引入中国地图的geoJson格式的json文件
      const register = china
      const data = ref({
        columns: ['省份', '面积'],
        rows: [ ['广东', 100], ['北京', 60], ['广西', 78], ['湖南', 90],
          ['湖北', 110], ['福建', 87], ['新疆', 90], ['贵州', 75], ['江苏', 63],
          ['山西', 80], ['山东', 90], ['黑龙江', 105]
        ]
      })
    </textarea>
    <div  style="width: 800px; height: 400px; border: 1px solid" > 
       <dv-chart-map fit :data="data" :register="register" map="china"></dv-chart-map>
    </div>
    <br/> 
    <h2>settings 使用</h2>
    <h2>settings.type </h2>
    <div>scatter
    setting.type 默认值为 'map'， 可以选择 'scatter' 'effectScatter' 'lines' 或者他们的集合（{}）
    </div>
    <div><strong>type = 'scatter'</strong></div>
    <textarea readonly style="width: 800px; height: 140px">
      <dv-chart-map fit :data="effect" :register="register" map="china" :settings="{type: 'scatter'}"></dv-chart-map>

      const effect = ref({
        columns: ['省份', '人口'],
        rows: [ ['广东', 60], ['北京', 160], ['广西', 78], ['湖南', 90], ['湖北', 110], ['福建', 87] ]
      })
    </textarea>
    <div  style="width: 800px; height: 400px; border: 1px solid" > 
       <dv-chart-map fit :data="effect" :register="register" map="china" :settings="{type: 'scatter'}" ></dv-chart-map> 
    </div>
    <br/> 
    <div><strong>type = 'lines'</strong></div>
    <textarea readonly style="width: 800px; height: 220px">
      <dv-chart-map fit :data="lines" :register="register" map="china" :settings="{type: 'lines'}" :extend="{visualMap: null}"></dv-chart-map>

      import china from '@/assets/geo/china.json' // 引入中国地图的geoJson格式的json文件
      const register = china
      const lines = ref({
        columns: ['省份', '航线'],
        rows: [ ['广东->北京', ['广东', '北京']], ['湖南->北京', ['湖南', '北京']], ['贵州->北京', ['贵州', '北京']], ['新疆->北京', ['新疆', '北京']], ['西藏->北京', ['西藏', '北京']] ]
      })
    </textarea>
    <div  style="width: 800px; height: 400px; border: 1px solid" > 
       <dv-chart-map fit :data="lines" :register="register" map="china" :settings="{type: 'lines'}" :extend="{visualMap: null}"></dv-chart-map>
    </div>
    <div><strong>type 集合混用 </strong></div>
    <textarea readonly style="width: 800px; height: 150px">
      <dv-chart-map fit :data="[data, effect, lines]" :register="register" map="china" :settings="{
        type: {
          '面积': 'map',
          '人口': 'effectScatter',
          '航线': 'lines',
        }
       }" ></dv-chart-map>
    </textarea>
    <div  style="width: 800px; height: 400px; border: 1px solid" > 
       <dv-chart-map fit :data="[data, effect, lines]" :register="register" map="china" :settings="{
        type: {
          '面积': 'map',
          '人口': 'effectScatter',
          '航线': 'lines',
        }
       }" ></dv-chart-map>
    </div>
    <br/> 

    <h3>settings.roam 地图拖动/缩放</h3>
    <div>settings="{roam: true}"</div>
    <div  style="width: 800px; height: 400px; border: 1px solid" > 
       <dv-chart-map fit :data="data" :register="register" map="china" :settings="{roam: true}"></dv-chart-map>
    </div>

    <h3>settings.dataHelper 自定义geoJson样式</h3>
    <div>自定义geoJson 前，先关闭默认geo配置（settings={geo: false}）</div>
    <textarea readonly style="width: 800px; height: 300px">
      <dv-chart-map fit :data="data" :register="register" map="china" 
        :settings="{geo: false, dataHelper: customGeoStyle}"
        :extend ="{visualMap: null}"
        debug
      ></dv-chart-map>

      const customGeoStyle = (row) => {
        return {
          itemStyle: {
            borderColor: 'blue',
            borderWidth: 2,
            areaColor: row[1] > 90 ? 'red' : 'green'
          },
          label: {
            show: true,
            color: '#fff'
          }
        }
      }
    </textarea>
    <div  style="width: 800px; height: 400px; border: 1px solid" > 
      <dv-chart-map fit :data="data" :register="register" map="china" 
        :settings="{geo: false, dataHelper: customGeoStyle}"
        :extend ="{visualMap: null}"
        debug
      ></dv-chart-map>
    </div>

    <h2>结合dv-page 与 extend 增加特效</h2>
    <textarea readonly style="width: 800px; height: 290px">
      <dv-page target="parent" fit> 
        <dv-chart-map fit :data="[data, effect, lines]" :register="register" map="china" :settings="{
          type: { '面积': 'map', '人口': 'effectScatter', '航线': 'lines' }
        }" ></dv-chart-map>
      </dv-page>

      const extend = ref({
        'series.1.itemStyle': {
          color: '#04faa7'
        },
        'series.2.lineStyle': {
          color: 'yellow',
          width: 2,
          curveness: 0.4
        },
        'series.2.effect': {
          show: true,
          period: 4, // 箭头指向速度，值越小速度越快
          trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', // 箭头图标
          symbolSize: 5 // 图标大小
        }
      }) 
    </textarea>
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit> 
          <dv-box x-align="center" y-align="middle" width="100%" height="100%"  >
            <dv-chart-map fit :data="[data, effect, lines]" :register="register" map="china" 
              :settings="{
                type: {
                  '面积': 'map',
                  '人口': 'effectScatter',
                  '航线': 'lines',
                }
              }" :extend="extend"></dv-chart-map>   
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 

    <h2>地图下转</h2>
    <div>点击地图访问下一层</div>
    <down-map></down-map>

    <br/><br/>
    <h2>更多个性化配置</h2>
    <p>参考 图表组件 extend配置的用法， <router-link to="/example/extend-use">extend 配置使用</router-link></p>
    <br/><br/>
  </div> 


 
</template>
<script setup lang="ts" >
import { ref, computed } from 'vue';
import { DvPage, DvBox, DvChartMap } from '$comp/index';
import china from '@/assets/geo/china.json'
import DownMap from '@/components/down-map.vue'
 
const register = china
const data = ref({
  columns: ['省份', '面积'],
  rows: [
    ['广东', 100],
    ['北京', 60],
    ['广西', 78],
    ['湖南', 90],
    ['湖北', 110],
    ['福建', 87],
    ['新疆', 90],
    ['贵州', 75],
    ['江苏', 63],
    ['山西', 80],
    ['山东', 90],
    ['黑龙江', 105]
  ]
})

const effect = ref({
    columns: ['省份', '人口'],
    rows: [
      ['广东', 60],
      ['北京', 160],
      ['广西', 78],
      ['湖南', 90],
      ['湖北', 110],
      ['福建', 87],
    ]
  })

const lines = ref({
  columns: ['省份', '航线'],
  rows: [
    ['广东->北京', ['广东', '北京']],
    ['湖南->北京', ['湖南', '北京']],
    ['贵州->北京', ['贵州', '北京']],
    ['新疆->北京', ['新疆', '北京']],
    ['西藏->北京', ['西藏', '北京']]
  ]
})
 
const extend = ref({
  'series.1.itemStyle': {
    color: '#04faa7'
  },
  'series.2.lineStyle': {
    color: 'yellow',
    width: 2,
    curveness: 0.4
  },
  'series.2.effect': {
    show: true,
    period: 4, // 箭头指向速度，值越小速度越快
    trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
    symbol: 'arrow', // 箭头图标
    symbolSize: 5 // 图标大小
  }
}) 
 
const customGeoStyle = (row) => {
  return {
    itemStyle: {
      borderColor: 'blue',
      borderWidth: 2,
      areaColor: row[1] > 90 ? 'red' : 'green'
    },
    label: {
      show: true,
      color: '#fff'
    }
  }
}

</script>
<style lang="scss" scoped>.page-layout{
  height: 100%;
  
 }
</style>
